<template>
	<view>
		<!-- 顶部栏 -->
		<view class="text-box" scroll-y="true">
			<text >{{text}}</text>
		</view>

		<!-- 输入区 -->
		<view class="memo-input-wrap">
			<uni-easyinput v-model="newMemo" placeholder="请输入备忘内容" @confirm="addMemo" confirmType="done"
				:clearable="true" :styles="{borderRadius: '8rpx'}" />
			<button class="add-btn" type="primary" @click="addMemo">
				<uni-icons type="plusempty" size="20" color="#fff" />
			</button>
		</view>

		<!-- 备忘录列表（自定义渲染，保证样式可控） -->
		<view v-if="memos.length" class="memo-list-custom">
			<view v-for="(item, index) in memos" :key="item.id" class="memo-list-row">
				<view class="memo-list-left" @click="toggleDone(index)">
					<uni-icons :type="item.done ? 'checkbox-filled' : 'circle'" :color="item.done ? '#4cd964' : '#ccc'"
						size="28" />
				</view>
				<view class="memo-list-content">
					<text :class="['memo-item-text', {done: item.done}]">{{ item.text }}</text>
					<text class="memo-item-time">{{ formatTime(item.id) }}</text>
				</view>
				<view class="memo-list-right">
					<uni-icons type="trash" size="22" color="#ff4d4f" @click="deleteMemo(index)" />
				</view>
			</view>
		</view>
		<view v-else class="empty-list">
			<uni-icons type="info" size="60" color="#dadada" />
			<text class="empty-tip">暂无备忘录，快来添加吧！</text>
		</view>
	</view>
</template>

<script src="./index.js"></script>
<style lang="scss" src="./index.scss"></style>